<template>
  <div>
    <div class="editor_container">
      <div id="editor"></div>
      <div class="btn" @click="onBtn">
        按钮
      </div>
    </div>

  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  mounted () {
    this.inditEditor()
  },
  methods: {
    inditEditor () {
      const editor = new E('#editor')
      // 配置菜单栏
      editor.config.menus = [
        'fontSize',
        'backColor'
      ]
      editor.config.fontSizes = {
        // 'x-small': { name: '10px', value: '1' },
        'small': { name: '小号', value: '2' },
        'normal': { name: '中号', value: '3' },
        'large': { name: '大号', value: '4' },
        // 'x-large': { name: '24px', value: '5' },
        // 'xx-large': { name: '32px', value: '6' },
        // 'xxx-large': { name: '48px', value: '7' },
      }
      editor.config.colors = [
        '#cbdeb8',
        '#ffffff',
        '#c2d5ec',
        '#eab28b'
      ]
      editor.config.showFullScreen = false
      editor.create()
    },
    onBtn () {
      console.log(43)
    }
  },
}
</script>

<style lang="less" scoped>
.editor_container {
  position: relative;
  .btn {
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 99999;
    height: 40px;
    display: flex;
    align-items: center;
  }
}
</style>